<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=EDGE">
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
    <title>我的订单</title>
     <link rel="icon" href="./img/favicon.ico">

	<link rel="stylesheet" type="text/css" th:href="@{/css/elementui.css}" />
    <link rel="stylesheet" type="text/css" href="./css/all.css" />
    <link rel="stylesheet" type="text/css" href="./css/pages-seckillOrder.css" />
</head>

<body>
<div id="app">
    <!-- 头部栏位 -->
    <!--页面顶部-->
<div id="nav-bottom">
	<!--顶部-->
	<div class="nav-top">
		<div class="top">
			<div class="py-container">
				<div class="shortcut">
                    <ul class="fl">
                        <li class="f-item">青橙欢迎您！</li>
                        <li class="f-item">
								<span v-if="!loginInfo.username">
									请<a th:href="@{/loginUI}">登录</a>
								</span>
                            <span v-if="loginInfo.username">
									{{loginInfo.username}}
									<a href="javascript:void(0)" @click="logout">退出登录</a>
								</span>
                            <span>
									<a th:href="@{/registerUI}">免费注册</a>
								</span>
                        </li>
                    </ul>
					<div class="fr typelist">
						<ul class="types">
							<li class="f-item"><span><a href="javascript:void(0)" @click="openMyOrder">我的订单</a></span></li>
							
							<li class="f-item"><span><a href="javaScript:void(0)" @click="openCart()" >我的购物车</a></span></li>
							<li class="f-item"><span><a  href="javascript:void(0)" @click="openMyHome" >我的青橙</a></span></li>
							<li class="f-item"><span>青橙会员</span></li>						
							<li class="f-item"><span>企业采购</span></li>						
							<li class="f-item"><span>关注青橙</span></li>
							<li class="f-item"><span><a href="cooperation.html" target="_blank">合作招商</a></span></li>
							<li class="f-item"><span><a href="shoplogin.html" target="_blank">商家后台</a></span></li>				
							<li class="f-item"><span>网站导航</span></li>
						</ul>
					</div>
					
				</div>
			</div>
		</div>

		<!--头部-->
		<div class="header">
			<div class="py-container">
				<div class="yui3-g Logo">
					<div class="yui3-u Left logoArea">
						<a class="logo-bd" title="青橙"  href="javascript:void(0)" th:href="@{/index}"></a>
					</div>
					<div class="yui3-u Rit searchArea">
						<div class="search">
							<form action="" class="sui-form form-inline">
								<!--searchAutoComplete-->
								<div class="input-append">
									<input type="text" id="autocomplete"  class="input-error input-xxlarge" />
									<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
								</div>
							</form>
						</div>
					</div>
					
				</div>

			</div>
		</div>
	</div>
</div>

    <!--header-->
    <div id="account">
        <div class="py-container">
            <div class="yui3-g home">
                <!--左侧列表-->
                <div class="yui3-u-1-6 list">

                    <div class="person-info">
                        <div class="person-photo"><img v-bind:src="loginInfo.headPic" alt=""></div>
                        <div class="person-account">
                            <span class="name">{{loginInfo.username}}</span>
                            <span class="safe">账户安全</span>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                    <div class="list-items">
                        <dl>
							<dt><i>·</i> 订单中心</dt>
							<dd><a href="javascript:void(0)" @click="goOrder(5)" :class="orderStatus == 5 ? 'list-active' : ''">我的订单</a></dd>
							<dd><a href="javascript:void(0)" @click="goOrder(0)" :class="orderStatus == 0 ? 'list-active' : ''">待付款</a></dd>
							<dd><a href="javascript:void(0)" @click="goOrder(1)" :class="orderStatus == 1 ? 'list-active' : ''">待发货</a></dd>
							<dd><a href="javascript:void(0)" @click="goOrder(2)" :class="orderStatus == 2 ? 'list-active' : ''">待收货</a></dd>
						</dl>
						<dl>
							<dt><i>·</i> 设置</dt>
							<dd><a href="center-setting-info.html">个人信息</a></dd>
							<dd><a href="javascript:void(0)" th:href="@{/openAddress}" :class="orderStatus == 2 ? 'list-active' : ''">地址管理</a></dd>
							<dd><a th:href="@{/centerSettingSafe}" >安全管理</a></dd>
						</dl>
                    </div>
                </div>
                <!--右侧主内容-->
                <div class="yui3-u-5-6 order-pay">
                    <div class="body">
                        <div class="table-title">
                            <table class="sui-table  order-table">
                                <tr>
                                    <thead>
                                        <th width="35%">宝贝</th>
                                        <th width="5%">单价</th>
                                        <th width="5%">数量</th>
                                        <th width="8%">商品操作</th>
                                        <th width="10%">实付款</th>
                                        <th width="10%">交易状态</th>
                                        <th width="10%">交易操作</th>
                                    </thead>
                                </tr>
                            </table>
                        </div>
                        <div class="order-detail">
                            <div class="orders">
                                <div class="choose-order">
                                    <div class="sui-pagination pagination-large top-pages">
                                        <ul>
                                            <li class="prev"><a href="javascript:void(0)" @click="previous">上一页</a></li>

                                            <li class="next"><a href="javascript:void(0)" @click="next">下一页</a></li>
                                        </ul>
                                    </div>
                                </div>
							<!-- 查询出的数据 -->
							<!-- 如果没有数据则显示当前状态无订单 -->
							<div v-if="myOrder.length == 0">当前没有订单</div>
							<div v-else v-for="order in myOrder" :key="order.id">
								<div class="choose-title">
									<label data-toggle="checkbox" class="checkbox-pretty ">
										   <input type="checkbox" checked="checked"><span>{{ order.createTime }}　订单编号：{{ order.id }}  <a>和我联系</a></span>
									 </label>
									  <a class="sui-btn btn-info share-btn">分享</a>
								</div>
								<table class="sui-table table-bordered order-datatable">
									<tbody>
										<tr>
											<td width="35%">
												<div class="typographic"><img :src="order.image" width="82px" height="82px"/>
													<a href="#" class="block-text">{{order.name}}</a>
													<span class="guige">{{order.spec}}</span>
												</div>
											</td>
											<td width="5%" class="center">
												<ul class="unstyled" v-if="order.price / 100 > 1">
													<li v-if="order.preMoney == 0">¥{{ order.price / 100 }}.00</li>
													<li v-else class="o-price">¥{{ order.price / 100 }}.00</li>
													<li v-else>¥{{ order.price - order.preMoney / 100 }}.00</li>
												</ul>
												<ul class="unstyled" v-else>
													<li v-if="order.preMoney == 0">¥{{ order.price / 100 }}</li>
													<li v-else class="o-price">¥{{ order.price / 100 }}</li>
													<li v-else>¥{{ order.price - order.preMoney / 100 }}</li>
												</ul>
											</td>
											<td width="5%" class="center">{{ order.num }}</td>
											<td width="8%" class="center">
												<ul class="unstyled">
													<li v-if="order.consignStatus == 0">待发货</li>
													<li v-if="order.consignStatus == 1">已发货</li>
													<li><a>退货/退款</a></li>
												</ul>
											</td>
											<td width="10%" class="center" >
												<ul class="unstyled" v-if="order.num * order.price / 100 > 1">
													<li>¥{{ order.num * order.price / 100 }}.00</li>
													<li v-if="order.postFee == null">（含运费：￥0.00）</li>
													<li v-else>（含运费：￥{{order.postFee}}.00）</li>
												</ul>
												<ul class="unstyled" v-else>
													<li>¥{{ order.num * order.price / 100 }}</li>
													<li v-if="order.postFee == null">（含运费：￥0.00）</li>
													<li v-else>（含运费：￥{{order.postFee}}.00）</li>
												</ul>
											</td>
											<td width="10%" class="center">
												<ul class="unstyled">
													<li v-if="order.payStatus == 0">等待卖家付款</li>
													<li v-if="order.payStatus == 1">买家已付款</li>
													<li><a th:href="@{/orderDetail/order.id}" class="btn">订单详情 </a></li>
												</ul>
											</td>
											<td width="10%" class="center">
												<ul class="unstyled">
													<li v-if="order.orderStatus == 0">
														<a href="#" class="sui-btn btn-info" @click="goPay(order.id,order.num * order.price)">立即付款</a>
													</li>
													<li v-if="order.orderStatus == 1">
														<a href="#" class="sui-btn btn-info">待发货</a>
													</li>
													<li v-if="order.orderStatus == 2">
														<a href="#" class="sui-btn btn-info" @click="ok(order.id)">确认收货</a>
													</li>
													<li v-if="order.orderStatus == 1">
														<a href="#" class="sui-btn btn-info">取消订单</a>
													</li>
												</ul>
											</td>
										</tr>
										

									</tbody>
								</table>
							</div>
                            <div class="choose-order">
                                <div class="sui-pagination pagination-large top-pages">
                                    <ul>
                                        <li class="prev"><a href="javascript:void(0)" @click="previous">«上一页</a></li>
										<li v-for="index in totalPage" :key="index" :class="pageNum == index ? 'active':''">
											
											<a href="javascript:void(0)" @click="go(index)">{{ index }}</a>
										</li>
                                        <li class="next}}"><a href="javascript:void(0)" @click="next">下一页»</a></li>
                                    </ul>
                                    <div><span>共{{ totalPage }}页&nbsp;</span><span>
                                            到
                                            <input v-model="inputPage" type="text" class="page-num"><button class="page-confirm" @click="go(inputPage)">确定</button>
                                            页</span></div>
                                </div>
                            </div>
                            <div class="clearfix"></div>
                        </div>

                        <div class="like-title">
                            <div class="mt">
                                <span class="fl"><strong>热卖单品</strong></span>
                            </div>
                        </div>
						<div class="like-list">
							<ul class="yui3-g">
								<li class="yui3-u-1-4" th:each="sku : ${skuBySaleNum}">
									<div class="list-wrap">
										<div class="p-img">
											<img th:src="${sku.image}" />
										</div>
										<div class="attr">
											<em th:text="${sku.name}"></em>
										</div>
										<div class="price">
											<strong>
												<em>¥</em>
												<i th:text="${sku.price}"></i>
											</strong>
										</div>
										<div class="commit">
											<i class="command" th:text="'已有' + ${sku.commentNum} + '人评价'"></i>
										</div>
									</div>
								</li>
							</ul>
						</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!-- 底部栏位-->
    <!--页面底部-->
<div class="clearfix footer">
	<div class="py-container">
		<div class="footlink">
			<div class="Mod-service">
				<ul class="Mod-Service-list">
					<li class="grid-service-item intro  intro1">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item  intro intro2">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item intro  intro3">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item  intro intro4">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
					<li class="grid-service-item intro intro5">

						<i class="serivce-item fl"></i>
						<div class="service-text">
							<h4>正品保障</h4>
							<p>正品保障，提供发票</p>
						</div>

					</li>
				</ul>
			</div>
			<div class="clearfix Mod-list">
				<div class="yui3-g">
					<div class="yui3-u-1-6">
						<h4>购物指南</h4>
						<ul class="unstyled">
							<li>购物流程</li>
							<li>会员介绍</li>
							<li>生活旅行/团购</li>
							<li>常见问题</li>
							<li>购物指南</li>
						</ul>

					</div>
					<div class="yui3-u-1-6">
						<h4>配送方式</h4>
						<ul class="unstyled">
							<li>上门自提</li>
							<li>211限时达</li>
							<li>配送服务查询</li>
							<li>配送费收取标准</li>
							<li>海外配送</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>支付方式</h4>
						<ul class="unstyled">
							<li>货到付款</li>
							<li>在线支付</li>
							<li>分期付款</li>
							<li>邮局汇款</li>
							<li>公司转账</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>售后服务</h4>
						<ul class="unstyled">
							<li>售后政策</li>
							<li>价格保护</li>
							<li>退款说明</li>
							<li>返修/退换货</li>
							<li>取消订单</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>特色服务</h4>
						<ul class="unstyled">
							<li>夺宝岛</li>
							<li>DIY装机</li>
							<li>延保服务</li>
							<li>品优购E卡</li>
							<li>品优购通信</li>
						</ul>
					</div>
					<div class="yui3-u-1-6">
						<h4>帮助中心</h4>
						<img src="./img/wx_cz.jpg">
					</div>
				</div>
			</div>
			<div class="Mod-copyright">
				<ul class="helpLink">
					<li>关于我们<span class="space"></span></li>
					<li>联系我们<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>商家入驻<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们<span class="space"></span></li>
					<li>营销中心<span class="space"></span></li>
					<li>友情链接<span class="space"></span></li>
					<li>关于我们</li>
				</ul>
				<p>地址：北京市昌平区建材城西路金燕龙办公楼一层 邮编：100096 电话：400-618-4000 传真：010-82935100</p>
				<p>京ICP备08001421号京公网安备110108007702</p>
			</div>
		</div>
	</div>
</div>
</div>
</div>
<!--页面底部END-->
<script type="text/javascript" src="./js/all.js"></script>
<script type="text/javascript" src="./js/plugins/jquery/jquery.min.js"></script>
<script type="text/javascript" src="./js/pages/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/js-cookie@2/src/js.cookie.min.js"></script>
<script th:src="@{/js/vue.js}"></script>
<script th:src="@{/js/axios.js}"></script>
<script th:src="@{/js/interceptor.js}"></script>
<script th:src="@{/js/elementui.js}"></script>
<script>
    var vue = new Vue({
        el: '#app',
        data () {
            return {
				// 页号
				pageNum: 1,
				// 页大小
				pageSize: 3,
				// 总行数
				total: 0,
				// 我的订单对象
				myOrder: [],
				// 登录对象
                loginInfo: {},
				// 登录令牌
                token: '',
				// 输入跳转页
				inputPage: '',
				// 订单状态
				orderStatus: 5,
				// 总页数
				totalPage: 1
            }
        },
        methods: {
			// 打开我的购物车
			openCart(){
				if (!this.loginInfo.username) {
					this.$confirm('您还为登陆, 为您跳转登陆, 是否继续?', '提示', {
						confirmButtonText: '是',
						cancelButtonText: '否',
						type: 'warning'
					}).then(() => {
						//点击确定跳转登陆
						window.location.href='/portal/loginUI'
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
					return
				}
				window.location.href='/portal/cartUI'
			},
			// 获取我的订单方法
			getMyOrder () {
				axios.get(`/portal/queryOrderItemSkuByUsername/${this.pageNum}/${this.pageSize}/${this.orderStatus}`).then(response => {
					this.$set(this.myOrder = response.data.data.orders.rows)
					this.total = response.data.data.orders.total
					this.totalPage = Math.ceil(this.total / this.pageSize)
				})
			},
            // 从Cookie中获取用户信息
            showInfo() {
                var user = Cookies.get('qingcheng_user')
                // 把字符串转换json对象
                if (user) {
                    this.loginInfo = JSON.parse(user)
                }
            },
            logout () {
                // 清空cookie值
                Cookies.set('qingcheng_token', '', {domain: 'localhost'})
                Cookies.set('qingcheng_user', '', {domain: 'localhost'})
                // 回到首页面
                window.location.href='/portal/index'
            },
			//打开我的账户
			openMyHome(){
				if (!this.loginInfo.username) {
					this.$confirm('您还为登陆为您跳转登陆, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						//点击确定跳转登陆
						window.location.href='/portal/loginUI'
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
					return
				}
				//跳转页面
				window.location.href='/portal/myHome'
			},
			// 打开我的订单
			openMyOrder () {
				if (!this.loginInfo.username) {
					this.$confirm('您还为登陆为您跳转登陆, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						//点击确定跳转登陆
						window.location.href='/portal/loginUI'
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消'
						});
					});
					return
				}
				window.location.href='/portal/myOrder'
			},
			// 下一页
			next () {
				// 获取下一页的页号
				const nextPage = this.pageNum + 1
				// 判断当前页是否是最后一页
				if (nextPage <= this.totalPage) {
					this.pageNum += 1
					this.getMyOrder()
					return false
				}
				this.$message.info("当前已经是最后一页了")
			},
			// 上一页
			previous () {
				// 判断当前是否是第一页
				if (this.pageNum > 1) {
					this.pageNum -= 1
					this.getMyOrder()
					return false
				}
				this.$message.info("当前已经是第一页了")
			},
			// 跳转多少页
			go (index) {
				if (index > this.totalPage) {
					this.inputPage = 1
					this.pageNum = 1
					this.getMyOrder()
					this.$message.info("没有当前页，已跳转到第一页")
					return false
				}
				this.pageNum = index
				this.getMyOrder()
			},
			// 右侧菜单条件查询我的订单
			goOrder (status) {
				this.orderStatus = status
				this.getMyOrder()
			},
			// 立即付款
			goPay (id,money) {
				location.href="/portal/pay?ordersn=" + id + "&money=" + money
			},
			// 确认收货 订单已完成
			ok (id) {
				location.href="/portal/okOrder/" + id
			}
		},
        created () {
            this.getMyOrder()
            this.showInfo()
        }
    })
</script>

</body>

</html>